<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>例子</title>
  <script>
    window.onload = function () {
      
      // 1. 匹配qq号，要求5-13位数字，第一位不能是0
      var reg = /^[1-9]\d{4,12}$/
      document.querySelector("#btnQQ").onclick = function() {
        alert(reg.test(document.querySelector("#qq").value))
      }
      
      // 2. 匹配IP地址
      var reg = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/
      document.querySelector("#btnIP").onclick = function() {
        alert(reg.test(document.querySelector("#ip").value))
      }
      
      // 3. 匹配一个姓名：李x然
      var reg = /^李[\u4e00-\u9fa5]然$/
      document.querySelector("#btnName").onclick = function() {
        alert(reg.test(document.querySelector("#name").value))
      }

      
    }
  </script>
</head>

<body>
  <label for="">qq号</label><input type="text" id="qq"> <button id="btnQQ">确定</button> <br>
  <label for="">ip地址</label><input type="text" id="ip"> <button id="btnIP">确定</button> <br>
  <label for="">中文姓名</label><input type="text" id="name"> <button id="btnName">确定</button> <br>
  
</body>

</html>